<template>
    <div class='home' style="width:100%; height: 100%;overflow: auto;">
         <div >
             <H2 style="margin-bottom: 30px;">培训期查询</H2>
             <el-form :inline="true" :model="formInline" class="demo-form-inline">
                <el-form-item label="培训期名称" v-if="detailsShow">
                    <el-input style="width:250px;" v-model="formInline.name" placeholder="培训期名称" clearable />
                </el-form-item>
                <el-form-item label="学员名称" v-else>
                    <el-input style="width:250px;" v-model="formInline.user" placeholder="学员名称" clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit" round>查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="success" round @click="addclass()">新建培训期</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="info" round @click="returnOne()">返回</el-button>
                </el-form-item>
             </el-form>
         </div>
        <div v-if="detailsShow">
            <el-table
                :data="tableDataTwo"
                style="width: 100%"
                fixed
            >
                <el-table-column prop="c_name" label="培训期名称" width="600"/>
                <el-table-column fixed="right" label="操作" width="620">
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="handlePage(scope.row), detailsShow=false">详情</el-button>
                        <el-button link type="primary" size="small" @click="delet(scope.row)">删除</el-button>
                        <el-button link type="primary" size="small" @click="insertUser(scope.row)">学员录入</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        
        <div v-else>
            <div><p>{{this.peixunName}}</p></div>
            <div style="float: left;"> </div>
            <div style="display: flex; justify-content: flex-end;">
                
                <el-button type="success" @click="drawer2 = true,            // 警号清空
                                                student.u_police_id = '',
                                                //姓名清空
                                                student.u_name = '',
                                                //手机号清空
                                                student.u_phone = '',
                                                //单位清空
                                                student.office_name = ''">上传单个学员</el-button>
            </div>
            <el-table
                :data="studentData"
                style="width: 100%"
                fixed
            >
                <el-table-column prop="u_police_id" label="警号" width="280"/>
                <el-table-column prop="u_name" label="学员名称" width="200"/>
                <el-table-column prop="office_name" label="单位" width="280"/>
                <el-table-column prop="u_phone" label="手机号" width="280"/>
                <el-table-column fixed="right" label="操作" >
                    <template #default="scope">
                        <el-button link type="primary" size="small" @click="edit(scope.row)">编辑</el-button>
                        <el-button link type="primary" size="small" @click="deletuser(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div style="display:flex; justify-content: center; position: fixed; bottom: 2%; left: 50%; right: 50%;">
            
                <el-pagination background layout="prev, pager, next" @current-change="pagesChange" :total="pagesData" />
            </div>
        </div>
        <el-drawer v-model="drawer" title="新建培训期" :with-header="false">
            <div style="display: flex; justify-content: center; ">
                <div>
                    <p> 培训期名称：</p>
                    <el-input v-model="addclassupSize" style="width: 240px" placeholder="请输入培训期名称" />
                </div>
            </div>
            <div style="display: flex; justify-content: center; margin-top: 30px;">
                <el-button type="success" @click="addclassup()">新建培训期</el-button>
            </div>
        </el-drawer>
        <!-- 弹出单个学员 -->
        <el-drawer v-model="drawer2" :direction="direction">
            <template #header>
                <h4>新增单个学员</h4>
            </template>
            <template #default>
                <div style="border-bottom: 1px solid #EEEE; padding-bottom:50px;">
                    <h2>查询学员</h2>
                    <p>警号查询:</p>
                    <el-input v-model="seach.police_id" style="width: 240px" placeholder="请输入信息" />
                    <p>身份证查询:</p>
                    <el-input v-model="seach.id_card" style="width: 240px" placeholder="请输入信息" />

                    <div style="width: 100%; display: flex; justify-content: center; margin-top: 26px;">
                        <el-button type="primary" @click="sechData()">查询</el-button>
                    </div>
                </div>
                <div>
                   <p><span style="color:red;">*</span>警号:</p>
                   <el-input v-model="student.u_police_id" style="width: 240px" placeholder="请输入警号" />
                   <p>姓名:</p>
                   <el-input v-model="student.u_name" style="width: 240px" placeholder="请输入姓名" />
                   <p>年龄:</p>
                   <el-input-number v-model="student.u_age" :min="1" :max="100" @change="handleChange" placeholder="请输入年龄" />
                   <p>性别:</p>
                   <el-select v-model="student.u_sex" placeholder="选择性别" style="width: 240px">
                        <el-option
                            v-for="item in Gender"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                  </el-select>
                   <p><span style="color:red;">*</span>身份证:</p>
                   <el-input v-model="student.u_id_card" style="width: 240px" placeholder="请输入身份证" />
                   <p>手机号:</p>
                   <el-input  v-model="student.u_phone" style="width: 240px" oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" placeholder="请输入手机号"></el-input>
                   <p>邮箱:</p>
                   <el-input v-model="student.u_email" style="width: 240px" placeholder="请输入邮箱" />
                   <p><span style="color:red;">*</span>单位:</p>
                   <el-input v-model="student.office_name" style="width: 240px" placeholder="请输入单位" />
                   <p>职位:</p>
                   <el-input v-model="student.u_duty" style="width: 240px" placeholder="请输入职位" />
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="drawer2 = false">取消</el-button>
                    <el-button type="primary" @click="confirmClick">确认</el-button>
                </div>
            </template>
        </el-drawer>
         <!-- 编辑单个学员 -->
         <el-drawer v-model="EditTrue" :direction="direction">
            <template #header>
                <h4>编辑学员</h4>
            </template>
            <template #default>
                <div>
                   <p>警号:</p>
                   <el-input v-model="student.u_police_id" style="width: 240px" placeholder="请输入警号" />
                   <p>姓名:</p>
                   <el-input v-model="student.u_name" style="width: 240px" placeholder="请输入姓名" />
                   <p>年龄:</p>
                   <el-input-number v-model="student.u_age" :min="1" :max="100" @change="handleChange" placeholder="请输入年龄" />
                   <p>性别:</p>
                   <el-select v-model="student.u_sex" placeholder="选择性别" style="width: 240px">
                        <el-option
                            v-for="item in Gender"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                        />
                  </el-select>
                   <p>身份证:</p>
                   <el-input v-model="student.u_id_card" style="width: 240px" placeholder="请输入身份证" />
                   <p>手机号:</p>
                   <el-input  v-model="student.u_phone" style="width: 240px" oninput="value=value.replace(/[^0-9.]/g,'').replace(/\.{2,}/g,'.').replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3')" placeholder="请输入手机号"></el-input>
                   <p>邮箱:</p>
                   <el-input v-model="student.u_email" style="width: 240px" placeholder="请输入邮箱" />
                   <p>职位:</p>
                   <el-input v-model="student.u_duty" style="width: 240px" placeholder="请输入职位" />
                </div>
            </template>
            <template #footer>
                <div style="flex: auto">
                    <el-button @click="drawer2 = false">取消</el-button>
                    <el-button type="primary" @click="editClick">修改</el-button>
                </div>
            </template>
        </el-drawer>
    </div>
 </template>
 <script>
 import { ElMessage, ElMessageBox } from 'element-plus'
import LoginVue from './Login.vue'
import { Loading } from 'element-plus/es/components/loading/src/service'
 export default {
    name: '',
    // 组件参数 接收来自父组件的数据
    props: {},
    // 局部注册的组件
    components: {},
    data () {
        return {
            peixunName:'',
            drawer:false,
            formInline :{
                user: '',
                region: '',
                date: '',
                name:'',
            },
            tableDataTwo:[],
            studentData:[],
            examtime: false,
            examinformation:'',
            addclassupSize:'',
            pagesData:10,
            pagesSize:1,
            valC_id:{},
            detailsShow:true,
            EditTrue:false,
            activities: [
                {
                    content: '入学',
                    timestamp: '2018-04-15',
                },
                {
                    content: '暂停',
                    timestamp: '2018-04-13',
                },
                {
                    content: '毕业',
                    timestamp: '2018-04-11',
                },
            ],
            drawer2:false,
            student:{
                office_id: '',
                office_name: '',
                r_id: '',
                u_age: '',
                u_duty: "",
                u_email: "",
                u_id: '',
                u_id_card: "",
                u_name: "李科泉",
                u_password: '',
                u_phone: "",
                u_police_id: "",
               // u_name:"", // 名
               // u_age:"",  // 年龄
               // u_sex:'',  // 男 女
               // u_police_id:"", // 警号
               // u_id_card:"",   // 身份证
               // u_phone:"",  // 手机号 
               // u_email:"", // 邮箱
               // office_name: '', // 单位id
               // u_duty:"", // 职位
               // c_id:'',  // 培训期id
            },
            Gender:[
                {
                    value: '0',
                    label: '男',
                },
                {
                    value: '1',
                    label: '女',
                },
            ],
            Allstudents:[],
            seach:{
                u_name:'',
                id_card:'',
                police_id:'',
            },
        }
     },
    computed: {},
    // 侦听器
    watch: {},
    created () {
        this.$store.dispatch('Classinformation')
        this.queryclass()
    },
    mounted () {
       
    },
 // 组件方法
    methods: {
        // 学员录入页面跳转
        insertUser(val){
            this.$router.push('/student/')            
        },

        onSubmit() {
            if(this.detailsShow) {
                this.get('/class?c_name='+this.formInline.name).then(res=>{
                    if(res.code == 200){
                        this.$message({
                            message: '查询成功',
                            type: 'success',
                        })
                        this.tableDataTwo = res.data
                    }else{
                        this.tableDataTwo = []
                    }
                })
            }else{
                this.get('/student?c_id='+this.valC_id+'&u_name='+this.formInline.user+'&page='+this.pagesSize).then(res=>{
                    if(res.code == 200){
                        this.$message({
                            message: '查询成功',
                            type: 'success',
                        })
                        this.studentData = res.data.records
                        this.pagesData = res.data.total
                    }else{
                        this.studentData = []
                        this.pagesSize = 1
                        this.$message({
                            message: '该培训期为空',
                            type: 'success',
                        })
                    }
                })
            }
        },
        edit(val){
            this.EditTrue = true,
            this.student = val
        },
        editClick() {
            this.post('/student/modify',this.student).then(res=>{
                if(res.code == 200){
                    this.handleClick()
                    this.$message({
                        message: '修改成功',
                        type: 'success',
                    })
                }
            })
        },
        deletuser(item) {
            let param = {
                valC_id: this.valC_id,
                u_id: item.u_id
            }
            ElMessageBox.confirm('你确定要删除？','删除提示', {
                confirmButtonText: '删除',
                cancelButtonText: '取消',
                type: 'tijia',
                draggable: true,
            }).then(() => {
                this.$store.dispatch('deleclick',param)
                setTimeout(() =>{
                    this.handleClick()
                },500)
            }).catch(() => {
            })
        },
        sechData() {
            console.log('---------')
            console.log('---------')
            console.log('---------')
            console.log(this.valC_id)
            this.get('/student/getStudent?c_id='+this.valC_id+'&id_card='+this.seach.id_card+'&police_id='+this.seach.police_id).then(res=>{
                if(res.code == 200){
                    this.student = res.data
                }else{
                    this.$message({
                        message: res.data,
                        type: 'error',
                    })
                }
            })
        },
        confirmClick() {
            this.student.c_id = this.valC_id
            if(this.student.office_name == ''){
                this.$message({
                    message: '单位必填',
                    type: 'error',
                })
                return
            }
            if(this.student.u_id_card == '' && this.student.u_police_id == ''){
                this.$message({
                    message: '警号身份证必填一个',
                    type: 'error',
                })
                return
            }
            this.post('class/add_stu',this.student).then(res=>{
                if(res.code == 200){
                    this.$message({
                        message: '添加成功',
                        type: 'success',
                    })
                    this.handleClick()
                    this.drawer2 = false
                    this.student.u_police_id = ''
                    this.student.u_name = ''
                    this.student.u_age = ''
                    this.student.u_sex = ''
                    this.student.u_id_card = ''
                    this.student.u_phone = ''
                    this.student.u_email = ''
                    this.student.office_name = ''
                    this.student.u_duty = ''
                    this.student.c_id = ''
                }else{
                    this.$message({
                        message: res.data,
                        type: 'error',
                    })
                }
            })
        },
        pagesChange(val) {
            this.pagesSize = val
            this.handleClick()
        },
        returnOne(){
            this.studentData = []
            this.detailsShow = true
        },
        delet(val) {
            this.get('/class/delete?c_id='+val.c_id).then(res=>{
                if(res.code == 200){
                    this.$message({
                        message: '删除成功',
                        type: 'success',
                    })
                    setTimeout(() =>{
                        this.queryclass()
                    },300)
                }else {
                    this.$message({
                        message: res.data,
                        type: 'error',
                    })
                }
            })
        },
        queryclass(){
            this.get('class/').then(res=>{
                if(res.code == 200){
                    this.tableDataTwo = res.data
                }else{
                    this.tableDataTwo = []
                }
            })
        },
        addclassup(){
            let param = {
                c_name:this.addclassupSize
            }
            this.post('/class/save',param).then(res=>{
                if(res.code == 200){
                    this.$message({
                        message: '新增成功',
                        type: 'success',
                    })
                    this.queryclass()
                    this.drawer = false
                }
            })
        },
        addclass(){
            if(this.drawer){
                this.drawer = false
            }else{
                this.drawer = true
            }
        },
        handlePage(val){
            this.valC_id = val.c_id
            this.handleClick()
            this.peixunName = val.c_name
        },
        handleClick(){
            this.get('/student/?c_id='+this.valC_id+'&page='+this.pagesSize).then(res=>{
                if(res.data.records.length == 0){
                    this.studentData = []
                    this.pagesSize = 1
                    this.$message({
                        message: '该培训期为空',
                        type: 'success',
                    })
                }else{
                    this.studentData = res.data.records
                    this.pagesData = res.data.total
                    console.log(res.data)
                    console.log('1111')
                }
            })
        },
    },
 // 创建前
     beforeCreate () { },
 // 挂载前
     beforeMount () {},
 // 更新前 
     beforeUpdate () {},
     updated () {},
 // 组件创建最初始keep-alive标签中有效
     activated () { },
 // 组件停用时
     deactivated () {},
 // 销毁前
     beforeDestroy () {},
 // 销毁后
     destroyed () {}
 }
 </script> 
 <style scoped>
 </style>